<script setup lang="ts">
import type { FormRules } from 'wot-design-uni/components/wd-form/types';
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';

const formRef = ref();

const model = ref({
  content: '',
  phone: '',
  email: '',
  reply: false
});

const formRules = ref<FormRules>({
  phone: [
    {
      required: false,
      message: '联系电话输入有误',
      validator(value) {
        if (!value) {
          return Promise.resolve();
        }
        if (!/^1[3-9]\d{9}$/.test(value)) {
          return Promise.reject(new Error('请输入正确的手机号码'));
        }
      }
    }
  ],
  email: [
    {
      required: false,
      message: '电子邮箱输入有误',
      validator(value) {
        if (!value) {
          return Promise.resolve();
        }
        if (!/^[\w.%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
          return Promise.reject(new Error('请输入正确的电子邮箱'));
        }
      }
    }
  ]
});

function handleNext() {
  uni.navigateTo({
    url: '/pages/satisfactionSurvey/result'
  });
}
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto px-48 py-40 pb-60">
      <view class="page-content">
        <view class="page-title">
          意见建议
        </view>
        <view class="page-subtitle">
          您对我们的服务有什么其他意见或建议？
        </view>

        <view class="page-rating">
          <view class="page-rating__input textarea mt-30">
            <wd-textarea
              v-model="model.content" show-word-limit maxlength="500"
              placeholder="请输入您的建议和意见，帮助我们改进服务质量..."
            />
          </view>

          <view class="page-tips mt-50 py-48 pl-80">
            <view class="page-tips__content flex items-center">
              <wd-icon name="tips" size="40px" />
              <view>您的宝贵意见将帮助我们不断改进服务质量</view>
            </view>
            <view class="page-tips__desc ml-12 mt-20">
              我们会认真对待每一条反馈，感谢您的支持！
            </view>
          </view>

          <view class="page-tips__checkbox mt-50 flex items-center">
            <wd-checkbox v-model="model.reply" shape="square" />
            <view class="ml-12">
              希望院方对您的反馈进行回复（选填）
            </view>
          </view>

          <wd-form ref="formRef" :model="model" :rules="formRules">
            <view class="form mt-50">
              <view class="form-item">
                <view class="form-item__label">
                  联系电话（选填）
                </view>
                <view class="form-item__input">
                  <wd-input placeholder="请输入您的联系电话" prop="phone" />
                </view>
              </view>
              <view class="form-item">
                <view class="form-item__label">
                  电子邮箱（选填）
                </view>
                <view class="form-item__input">
                  <wd-input placeholder="请输入您的电子邮箱" prop="email" />
                </view>
              </view>
            </view>
          </wd-form>
        </view>
      </view>

      <view class="flex-center">
        <view class="next-btn">
          <wd-button block @click="handleNext">
            提交问卷
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '满意度调查',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .page-content {
    background: rgba(225, 238, 255, 0.62);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 30px 40px 80px;

    .page-title {
      color: var(--text-color);
      font-size: 48px;
      font-weight: bold;
    }

    .page-subtitle {
      color: var(--secondary-text-color);
      font-size: 30px;
    }

    .page-rating__input {
      :deep(.wd-textarea) {
        --wot-textarea-fs: 32px;
        --wot-textarea-color: var(--text-color);
        --wot-textarea-bg: transparent;
        --wot-textarea-count-fs: 28px;
        --wot-textarea-count-color: #686869;
        --wot-input-placeholder-color: #686869;

        padding: 40px 46px;
        background: rgba(247, 250, 254, 0.6);
        border-radius: 20px;
        border: 2px solid rgba(255, 255, 255, 0.5);

        .wd-textarea__inner {
          height: 525px;
        }
      }
    }
  }

  .page-tips {
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(247, 250, 254, 0.5);
  }

  .page-tips__content {
    color: #3d3d3d;
    font-size: 36px;
    font-weight: bold;
  }

  .page-tips__desc {
    color: #3d3d3d;
    font-size: 28px;
  }

  .page-tips__checkbox {
    font-size: 34px;
    color: var(--primary);
    --wot-checkbox-size: 44px;
    --wot-checkbox-square-radius: 50%;
    --wot-checkbox-border-color: var(--primary);
    --wot-checkbox-icon-size: 32px;
  }

  .form {
    .form-item {
      margin-top: 40px;

      .form-item__label {
        color: var(--text-color);
        font-size: 36px;
        margin-bottom: 20px;
      }

      .form-item__input {
        --wot-input-placeholder-color: var(--secondary-text-color);
        --wot-input-inner-height: 98px;
        --wot-input-bg: #eff5ff;
        --wot-input-fs: 30px;
        --wot-input-color: var(--text-color);

        :deep(.wd-input) {
          border-radius: 16px;
          padding-left: 32px;

          &:after {
            height: 0;
          }
        }
      }
    }
  }

  .next-btn {
    width: 708px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 80px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
